<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <table border="1">
        <caption>个人信息</caption>
        <tr>
            <th>照片</th>
            <td id="head_td"></td>
        </tr>
        <tr>
            <th>名字</th>
            <td id="name_td"></td>
        </tr>
        <tr>
            <th>年龄</th>
            <td id="age_td"></td>
        </tr>
        <tr>
            <th>好友</th>
            <td id="friend_td"></td>
        </tr>
    </table>
    <input type="button" value="请求数据" onclick="f()">

    <script>

        function f() {
            let head_td = document.querySelector("#head_td");
            let name_td = document.querySelector("#name_td");
            let age_td = document.querySelector("#age_td");
            let friend_td = document.querySelector("#friend_td");
            let person = {
                url: "a.jpg",
                name: "刘德华",
                age: 55,
                friends: ["王冉婷", "池晓滔", "陈亮明"]
            };
            let img = document.createElement("img");
            img.src = person.url;
            let ul = document.createElement("ul");
            for (let p of person.friends) {
                let li = document.createElement("li");
                li.innerHTML = p;
                ul.append(li);
            }
            head_td.append(img);
            name_td.innerHTML = person.name;
            age_td.innerHTML = person.age;
            friend_td.append(ul);
        }
    </script>
</body>

</html>